<template>
  <div class="content">
    <mt-header title="我的钱包">
      <router-link slot="left" to="/">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="moneyFlag">
      <div class="iconfont iconqian4 flag"></div>
      <span>我的钱包</span>

    </div>
    <h1 style="font-family: 黑体;font-size: 40px;color:black">￥{{money}}</h1>

    <mt-button @click="tixian" style="width: 50% ;margin: auto;margin-top:30px" type="default">提现
    </mt-button>
    <pay-button @pay-ok="afterPay" style="width: 50% ;margin: auto;margin-top:30px" :money="10">充值10元</pay-button>
  </div>
</template>
<style scoped>
  .content {
    display: flex;
    flex-flow: column;
    text-align: center;

  }

  .moneyFlag {
    display: flex;
    margin: auto;
    flex-flow: column;
    margin-top: 20%;
  }

  .moneyFlag span {
    font-size: 20px;
    margin: 10px;
  }

  .moneyFlag .flag {
    font-size: 74px;
    color: #f2ca45;
    background: #f6de79;
    width: 74px;
    border-radius: 18%;
    padding: 20px;


  }
</style>
<script>
  import { Toast } from 'mint-ui';
  import { MessageBox } from 'mint-ui';
  import {getAmount,recharge} from '../api/api'
  import PayButton  from './common/PayButton'
  export default {
    components:{Toast,MessageBox,PayButton},
    mounted(){
      this.getData();
    },
    data(){
      return {
        money:0
      }
    },methods:{
      afterPay(orderId){
        let vm=this;
        recharge({orderId:orderId}).then((res)=>{
          Toast('充值成功!');
          vm.getData();
        });
      },
      getData(){
        let vm=this;
        getAmount({
          openid:sessionStorage.getItem('openid')
        }).then((res)=>{
          if(res.data.result){
            vm.money=res.data.data;
          }
        });
      },
      tixian(){
        MessageBox.prompt('请输入提现金额').then(({ value, action }) => {
          try{
            let v=parseFloat(value).toFixed(2);

            if(v>this.money){
              Toast('输入的金额不能超过余额,提现失败');
              return ;
            }
            if(v==0||v==NaN||v=='NaN'){
              Toast('金额不能为0,提现失败');
              return ;
            }
          }catch (e) {
            Toast('请输入正确的金额');
            return ;
          }
          MessageBox.prompt('请输入支付宝账号').then(({value,action})=>{
            Toast('申请已提交,大约1天内到账');
            return ;
          });
        });
      }
    }
  }

</script>
